import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image, Text } from "@tarojs/components-rn";
import { AtProgress } from 'taro-ui';
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime, partOf, pageSize } from "../../utils/common";
import welfareStyleSheet from "./welfare_styles";
import icon_71_on from '../../assets/img/icon_71_on.png';
var _styleSheet = welfareStyleSheet;
let Index = class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      totalCount: 0,
      pageIndex: 1,
      pageSize
    };
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '公益' });
    this.getPagedPublicWelfare();
  }
  getPagedPublicWelfare() {
    let { PublicWelfareStore } = this.props.stores;
    let { pageIndex, pageSize } = this.state;
    PublicWelfareStore.getPagedPublicWelfare({
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({ totalCount: toJS(res.totalCount), items: toJS(res.items) });
        } else {
          const { items } = this.state;
          items.push(...(res.items || []));
          this.setState({ totalCount: res.totalCount, items });
        }
      }
    });
  }
  onReachBottom() {
    let { totalCount, pageSize, pageIndex } = this.state;
    const { loading } = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getPagedPublicWelfare();
      });
    }
  }
  /**
   * 获取百分比
   * @param x 分子(已募捐金额)
   * @param y 分母(需要募捐总数)
   */
  getPercentage(x, y = 1) {
    let res = (x / y).toFixed(2);
    if (res >= 1) res = 1;
    return res * 100;
  }
  render() {
    let { items } = this.state;
    return <View style={_styleSheet["welfare-index"]}>
        <View style={_styleSheet["column-wrap"]}>
          <View style={[_styleSheet["column-title"], _styleSheet["content-30"]]}>
            <View style={_styleSheet["colume-name"]}>支持他(她)</View>
          </View>
        </View>

        <View style={_styleSheet["list-15"]}>
          {items.length > 0 && items.map(item => {
          return <View onClick={this.handelRouter.bind(this, '/pages/public_welfare/welfare_detail?id=' + item.id)} style={_styleSheet["list-15-item"]}>
                  <Image src={item.logoImg} style={_styleSheet["img"]} />
                  <View style={_styleSheet["info"]}>
                    <View style={[_styleSheet["line"], _styleSheet["line1"]]}>
                      <View style={_styleSheet["list-title"]}>{item.name}</View>
                      <View style={_styleSheet["progress"]}>
                        <AtProgress percent={this.getPercentage(item.sumMoney, item.amountOfApplication)} color="#de5932" isHidePercent={true} />
                      </View>
                      <Text style={_styleSheet["count"]}>{item.allCountPeople}</Text>
                      <Text style={_styleSheet["percentage"]}>{this.getPercentage(item.sumMoney, item.amountOfApplication)}%</Text>
                    </View>
                    <View style={[_styleSheet["line"], _styleSheet["line2"]]}>
                      <Text style={_styleSheet["list-desc"]}>{partOf(item.introduce, 50)}</Text>
                      <Image src={icon_71_on} style={_styleSheet["btn-support"]} />
                    </View>
                  </View>
                </View>;
        })}
          {items.length <= 0 && <View style={_styleSheet["page-none-info"]}>没有更多信息了。。。</View>}
        </View>
        <View style={_styleSheet["interval"]} />
      </View>;
  }
};
Index = tslib_1.__decorate([inject("stores"), observer], Index);
export default Index;